<template>
  <div class="firstStorage">
    <nut-popup v-model:visible="show" position="center" :style="{ width: '395px', background: 'rgba(19, 18, 50, 1)' }"
      class="storage-popup popupModel">
      <div class="popup-content">
        <p class="title_p">
          <span>{{ t('first_deposit_title') }}</span>
          <iconpark-icon class="close" icon-id="exit" color="#fff" size="1rem" @click="handleClose" />
        </p>

        <div class="tab-box">
          <div class="tab">
            <span v-for="(tab, index) in tabList" :key="index" v-shrink-on-click :class="{ btn: currentTab === index }"
              @click="handleTabChange(index)">
              {{ tab.name }}
            </span>
          </div>
          <div v-if="discountInfo" class="reg-box">
            <div class="rule-item">
              <div class="label">{{ t('first_deposit_activity_time') }}：</div>
              <div class="value">
                {{ formatTime(discountInfo.start_time) }}
                <br />
                {{ formatTime(discountInfo.end_time) }}
              </div>
            </div>

            <div class="rule-item">
              <div class="label">{{ t('first_deposit_min_amount') }}：</div>
              <div class="value highlight">{{ formatNumber(discountInfo.details.threshold) }}</div>
            </div>

            <div class="rule-item">
              <div class="label">{{ t('first_deposit_max_bonus') }}：</div>
              <div class="value highlight">{{ formatNumber(discountInfo.details.up_limit) }}</div>
            </div>


            <div class="rule-list" v-if="currentTab">

              <div class="rule-item">
                <span>{{ t('first_deposit_revive_gift') }}：100%</span>
              </div>
              <div class="rule-item">
                <span>{{ t('first_deposit_revive_water') }}：{{ discountInfo.details.require }}x</span>
              </div>
            </div>

            <div class="rule-desc">
              {{ t('first_deposit_revive') }}
            </div>

            <div class="rule-list">
              <div class="rule-item">
                <span>{{ t('first_deposit_revive_gift') }}：{{ discountInfo.details.save_ratio }}%</span>
              </div>
              <div class="rule-item">
                <span>{{ t('first_deposit_revive_water') }}：{{ discountInfo.details.save_require }}x</span>
              </div>
              <div class="rule-item">
                <span>{{ t('first_deposit_revive_minimum') }}：{{ formatNumber(discountInfo.details.save_trigger)
                  }}</span>
              </div>
            </div>


            <div class="rule-desc" v-if="!currentTab">
              {{ t('first_deposit_rule_desc') }}
            </div>

            <div class="rule-list" v-if="!currentTab">
              <div v-for="index in 6" :key="index" class="rule-item">
                {{ t(`first_deposit_rule_${index}`) }}
              </div>
            </div>
          </div>

          <nut-button block type="primary" class="apply-button" @click="handleApply">
            {{ t('promo_page_apply') }}
          </nut-button>
        </div>
      </div>
    </nut-popup>


    <Modal v-model:visible="isShowBank" :title="t('tip')">
      <div class="popup_body">
        <div class="info">{{ t('bindBankCard') }}</div>

        <div class="submit_btn">
          <nut-button @click="goUnbindBank" class="btn">{{ t('unbind') }}</nut-button>

        </div>
      </div>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import { Ref, onMounted, watch, defineAsyncComponent } from 'vue'
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from '@/netBase/NetPacket';
import { showToast } from "@nutui/nutui";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { User } from "@/store/user.ts";
import pinia from "@/store";

const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));

interface TabItem {
  name: string
  value: number
}

interface TimeInfo {
  year: number
  month: number
  day: number
  hour: number
  minute: number
  second: number
}

interface DiscountDetails {
  discount_ID: number
  limit: number
  ratio: number
  require: number
  restrict: string
  name: string
  threshold: number
  save_trigger: number
  save_ratio: number
  save_require: number
  up_limit: number
  bind_card: number
}

interface DiscountResponse {
  details: DiscountDetails
  extra: number[]
  start_time: TimeInfo
  end_time: TimeInfo
}
const { bankCardInfoList } = storeToRefs(User(pinia));
const router = useRouter();

const { t } = useI18n()


const emit = defineEmits(['update:show', 'close'])

// 响应式状态
const show: Ref<boolean> = ref(true)
const currentTab: Ref<number> = ref(0)
const discountInfo = ref<DiscountResponse | null>(null)


const tabList: TabItem[] = [
  { name: t('first_deposit_tab_x3'), value: 0 },
  { name: t('first_deposit_tab_100'), value: 1 }
]

// 工具函数
const formatNumber = (num: number): string => {
  return num.toLocaleString()
}

// 格式化时间的工具函数
const formatTime = (time: TimeInfo): string => {
  const pad = (num: number) => String(num).padStart(2, '0')
  return `${time.year}-${pad(time.month)}-${pad(time.day)} ${pad(time.hour)}:${pad(time.minute)}:${pad(time.second)}`
}

// 事件处理
const handleTabChange = (index: number): void => {
  currentTab.value = index
}

const handleClose = (): void => {
  show.value = false
  emit('close')
}

const handleApply = (): { [p: string]: unknown } | undefined => {

  if (firstStatus.value === '1') return showToast.warn(t('free_loot_rule_three_warn'))
  if (firstStatus.value === '2') return showToast.warn(t('free_loot_rule_hundred_percent_warn'))

  getBankCardList()
}

// 获取银行卡List
const getBankCardList = () => {
  const req = NetPacket.req_bank_card_info_list();
  PKwebsocket.instance.send(req, true)
}
const isShowBank = ref(false)
const handleMyBankList = (res: any) => {
  if (res.bank_card_info_list.length) {
    router.push({ name: 'deposit' })
  } else {
    isShowBank.value = true
    // showToast.warn(t('bindBankCard'))
  }
}
const goUnbindBank = () => {
  router.push('/paymentManagement/bank')
}


const firstStatus = ref(sessionStorage.getItem('FirstRechargeStatus') || '')

// 获取优惠详情
const getDiscountDetails = (id: number) => {
  // 再发送请求
  const query = NetPacket.req_discount_details();
  query.activity_ID = id;
  PKwebsocket.instance.send(query, true, {
    callbackName: 'msg_notify_discount_details',
    callback: handleDiscountDetails
  })
}

// 处理优惠详情响应
const handleDiscountDetails = (res: DiscountResponse) => {
  console.log(res, 'res');
  discountInfo.value = res
  console.log(discountInfo.value, 'discountInfo')
}
watch(
  () => bankCardInfoList.value,
  (n) => {
    handleMyBankList(n)
    console.log('=提现列表=-', n)
  }
);
watch(() => currentTab.value, (val) => {
  console.log(val);
  if (val) {
    getDiscountDetails(8002);
  } else {
    getDiscountDetails(8001);
  }
})

onMounted(() => {
  // 直接调用 getDiscountDetails，它会处理监听器的注册
  getDiscountDetails(8001);
});


</script>

<style scoped lang="scss">
:deep(.popupModel) {
  .popup-footer {
    margin-top: 20px;

    :deep(.nut-button) {
      width: 100%;
      height: 44px;
      background: linear-gradient(90deg, #5567FF 0%, #9E1EFF 100%);
      border: none;
      border-radius: 22px;

      .nut-button__warp {
        font-size: 16px;
        font-weight: 600;
        color: #fff;
      }
    }
  }
}

.popup-content {
  min-height: 478px;
  border-radius: 8px;

  .title_p {
    height: 46px;
    line-height: 46px;
    font-size: 14px;
    text-align: center;
    position: relative;
    color: #fff;
    margin-bottom: 24px;
    border-bottom: 1px solid rgb(29, 27, 67);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: rgba(29, 27, 67, 1);

    .close {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 10px;
      color: #fff;
      font-size: 20px;
    }
  }

  .tab-box {
    padding: 0 20px;
  }

  .apply-button {
    height: 44px;
    border-radius: 4px;
    margin-bottom: 26px;
  }
}

.tab {
  width: 100%;
  height: 44px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #c0c2db;
  margin: 0 auto;
  font-size: 12px;
  //background: url("/imgs/btn/tabBtn.webp") no-repeat;
  //background-size: cover;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(---, #1D1C3C);
  background: var(---1, #100E26);

  .btn {
    width: 152px;
    height: 40px;
    color: #fff;
    border-radius: 8px;
    background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%);
    box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;
  }

  >span {
    width: 120px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;

  }
}

.reg-box {
  margin-top: 16px;
  padding: 0 20px;
  color: #fff;

  .rule-item {
    display: flex;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 20px;

    .label {
      color: #fff;
    }

    .value {
      color: #fff;

      &.highlight {
        color: rgba(237, 131, 2, 1);
        font-weight: 600;
        font-size: 14px;
      }
    }
  }

  .rule-desc {
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
    font-weight: 600;
  }

  .rule-list {
    padding: 16px;

    .rule-item {
      display: block;
      color: #C0C2DB;
      font-size: 14px;
      line-height: 24px;
      margin-bottom: 8px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.tabs {
  width: 347px;
  margin: 0 auto 10px;
  border-radius: 12px;
  background: var(---, #131232);
  /* 新皮/弹窗背景 */
  box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
  color: #fff;

  .title {
    padding: 10px;
    border-radius: 12px 12px 0 0;
    width: 347px;
    height: 40px;
    color: #FFF;
    font-family: "PingFang SC";
    font-size: 14px;
    font-weight: 600;
    background: #282845;
    box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
  }

  .text {
    color: #FFF;
    font-family: "PingFang SC";
    font-size: 12px;
    font-weight: 400;
    padding: 15px 10px;
  }
}

.popup_body {
  padding: 50px 15px 20px 15px;

  .info {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    margin-bottom: 50px;
  }

  .nut-input {
    box-shadow: 0px 4px 4px 0px #00000040 inset;
    border-radius: 8px;
    border-bottom: unset;
    display: flex;
    justify-content: center;
    background: #1D1C3C;
    box-shadow: 0.5px 0.5px 1px 0px #333260 inset;

    &:deep(.input-text) {
      text-align: center !important;
    }


  }

}

.submit_btn {
  margin: 38px;
  display: flex;
  justify-content: center;

  .btn {
    width: 307px;
    height: 44px;
    border-radius: 8px;
  }
}
</style>
